<template>
    <div class="myTable">
        <el-table :data="tableData" border stripe style="width: 100%" :header-cell-style="mergeMehod"
            :row-class-name="rowClass" :span-method="mergeCloumn" @selection-change="SelectionChange"
            @cell-mouse-enter="cellMouseEnter" @cell-mouse-leave="cellMouseLeave">
            <el-table-column v-if="mutiSelect" type="selection" style="width: 55px;" />
            <template>
                <MyColumns v-for="(item, i) in tableTitle" :key="i" :my-col="item" />
                <slot name="handleColumn" />
            </template>
        </el-table>
        <el-pagination class="fy" background hide-on-single-page :page-size.sync="page.limit" :page-sizes="[2, 5, 10, 20]"
            :current-page.sync="page.curPage" layout="total, sizes, prev, pager, next,jumper" :total="page.total"
            @size-change="getSize" @current-change="getCurChange" />
    </div>
</template>
   
<script>
import MyColumns from './b'
export default {
    name: 'MyTable',
    components: {
        MyColumns,
    },
    props: {
        tableData: {
            type: Array,
            default: () => {
                return []
            }
        },
        theadData: {
            type: Array,
            default: () => {
                return []
            }
        },
        mutiSelect: {
            type: Boolean,
            default: () => {
                return false
            }
        },
        isMerge: {
            type: Boolean,
            default: () => {
                return false
            }
        },
        mergeName: {
            type: [String, Array],
            default: () => {
                return ''
            }
        },
        tableTitle: {
            type: Array,
            default: () => {
                return []
            }
        },
        page: {
            type: Object,
            default: function () {
                return {
                    limit: 2,
                }
            }
        }
    },
    data() {
        return {
            total: 100,
            mergeData: null,
            sameRowArr: [],
            curRowArr: [],
            columnArr: []
        }
    },
    watch: {
        tableTitle: {
            deep: true,  // 深度监听
            immediate: true,
            handler(newVal) {
                return newVal
            }
        },
        tableData: {
            deep: true,  // 深度监听
            immediate: true,
            handler(newVal) {
                if (this.isMerge) {
                    this.mergeData = this.dataMerge(newVal, [this.mergeName])
                    this.sameRowArr = this.getSameRow(newVal, this.mergeName)
                    this.getStripe()
                }
            }
        },
        deep: true
    },
    created() {

    },
    methods: {
        SelectionChange(val) {//多行选中，暂时没用上
            console.log(val, 'ppo')
        },
        getSize(val) {
            this.$set(this.page, 'curPage', 1)
            this.$emit('getPageTable', this.page.curPage, val)
        },
        getCurChange(val) {
            this.$emit('getPageTable', val, this.page.limit)
        },
        mergeMehod({ row, column, rowIndex, columnIndex }) { //合并表头
            if (!this.isMerge) return
            for (let i = 0; i < row.length - 1; i++) {
                if (row[i].level === row[i + 1].level && row[i].labelClassName && row[i].labelClassName === row[i + 1].labelClassName && column.label === '') {
                    return { display: 'none' }
                }
            }
            if (rowIndex === 0) {
                if (columnIndex === 0) {
                    this.$nextTick(() => {
                        if (document.getElementsByClassName(column.id).length !== 0) {
                            document.getElementsByClassName(column.id)[0].setAttribute('rowSpan', 2);
                            return false;
                        }
                    });
                    return column;
                }
            }
        },
        mergeCloumn({ column, rowIndex, columnIndex }) {


            // if (rowIndex === 0) {
            //     console.log(column, rowIndex, columnIndex);

            //     this.columnArr.push(columnIndex)
            //     // var columnArr = this.columnArr
            //     // let uniqueArray = columnArr.filter((item, index, array) => {
            //     //     return array.indexOf(item) === index
            //     // })
            //     // console.log(uniqueArray);
            // }

            // this.theadData
            console.log(this.theadData[this.theadData.length - 1]);
            if (columnIndex === 0 || columnIndex === 1 || columnIndex === this.theadData[this.theadData.length - 6] || columnIndex === this.theadData[this.theadData.length - 5] || columnIndex === this.theadData[this.theadData.length - 4] || columnIndex === this.theadData[this.theadData.length - 3] || columnIndex === this.theadData[this.theadData.length - 2] || columnIndex === this.theadData[this.theadData.length - 1]) {

                if (column.property === 'name' && rowIndex % 4 === 0) {

                    return {
                        rowspan: 4,
                        colspan: 1
                    };
                } else if (column.property === 'duanmian' && rowIndex % 2 === 0) {

                    return {
                        rowspan: 2,
                        colspan: 1
                    };
                }
                else if (column.property === 'prePeriod' && rowIndex % 2 === 0) {

                    return {
                        rowspan: 2,
                        colspan: 1
                    };
                }
                else if (column.property === 'chainRatio' && rowIndex % 2 === 0) {

                    return {
                        rowspan: 2,
                        colspan: 1
                    };
                } else if (column.property === 'theoreticalElongation' && rowIndex % 2 === 0) {

                    return {
                        rowspan: 4,
                        colspan: 1
                    };
                } else if (column.property === 'totalElongation' && rowIndex % 2 === 0) {

                    return {
                        rowspan: 4,
                        colspan: 1
                    };
                } else if (column.property === 'extensionError' && rowIndex % 2 === 0) {

                    return {
                        rowspan: 4,
                        colspan: 1
                    };
                } else if (column.property === 'handle' && rowIndex % 2 === 0) {

                    return {
                        rowspan: 4,
                        colspan: 1
                    };
                }
                else {
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                }
            } else {
                return {
                    rowspan: 1,
                    colspan: 1
                };
            }

            // if (columnIndex === 1 && column.property == 'duanmian') {
            //     if (rowIndex % 2 === 0) {
            //         return {
            //             rowspan: 2,
            //             colspan: 1
            //         };
            //     }


            //     // const _row = (this.filterData(this.tableData).one)[rowIndex]
            //     // const _col = _row > 0 ? 1 : 0
            //     // return {
            //     //     rowspan: _row,
            //     //     colspan: _col
            //     // }
            // }

            // if (columnIndex === 0) {
            //     if (rowIndex % 4 === 0) {
            //         return {
            //             rowspan: 4,
            //             colspan: 1
            //         };
            //     }
            // }
            // if (columnIndex === 1 || columnIndex === 2) {
            //     if (rowIndex % 2 === 0) {
            //         return {
            //             rowspan: 2,
            //             colspan: 1
            //         };
            //     }
            // }
            // if (!this.isMerge) return
            // if (this.mergeData) {
            //     //判断合并列
            //     let _row = column.property ? this.mergeData[column.property][rowIndex] : 1
            //     let _col = _row > 0 ? 1 : 0;
            //     return {
            //         rowspan: _row,
            //         colspan: _col
            //     }
            // }
        },
        // mergeCloumn({ row, column, rowIndex, columnIndex }) {
        //     console.log(row, column, rowIndex, columnIndex);
        //     // if (columnIndex === 0) {
        //     //     console.log('rrrrr', this.myObj[row.channel_type]);
        //     //     if (this.myObj[row.channel_type].start === rowIndex) {
        //     //         return {
        //     //             rowspan: this.myObj[row.channel_type].step,
        //     //             colspan: 1
        //     //         };
        //     //     } else {
        //     //         return {
        //     //             rowspan: 0,
        //     //             colspan: 0
        //     //         };
        //     //     }
        //     // }
        //     // if (columnIndex === 1) {
        //     //     if (
        //     //         this.myObj_two[row.channel_name_chinese + row.channel_type].start ===
        //     //         rowIndex
        //     //     ) {
        //     //         return {
        //     //             rowspan: this.myObj_two[row.channel_name_chinese + row.channel_type]
        //     //                 .step,
        //     //             colspan: 1
        //     //         };
        //     //     } else {
        //     //         return {
        //     //             rowspan: 0,
        //     //             colspan: 0
        //     //         };
        //     //     }
        //     // }
        // },

        // 合并单元格第一列
        resolveData(arr) {
            var obj = {};
            arr.forEach((val, key) => {
                if (!obj[val.channel_type]) {
                    obj[val.channel_type] = {
                        start: key,
                        step: 1
                    };
                } else {
                    obj[val.channel_type].step++;
                }
            });
            this.myObj = obj;
            console.log(obj);
        },
        // 合并单元格第二列
        resolveData_two(arr) {
            var obj = {};
            arr.forEach((val, key) => {
                if (!obj[val.channel_name_chinese + val.channel_type]) {
                    obj[val.channel_name_chinese + val.channel_type] = {
                        start: key,
                        step: 1
                    };
                } else {
                    obj[val.channel_name_chinese + val.channel_type].step++;
                }
            });
            this.myObj_two = obj;
            console.log(this.myObj_two, "this.myObj");
        },
        // // 合并单元格第一列
        // resolveData(arr) {
        //     var obj = {};
        //     arr.forEach((val, key) => {
        //         if (!obj[val.channel_type]) {
        //             obj[val.channel_type] = {
        //                 start: key,
        //                 step: 1
        //             };
        //         } else {
        //             obj[val.channel_type].step++;
        //         }
        //     });
        //     this.myObj = obj;
        //     console.log(obj);
        // },
        // // 合并单元格第二列
        // resolveData_two(arr) {
        //     var obj = {};
        //     arr.forEach((val, key) => {
        //         if (!obj[val.channel_name_chinese + val.channel_type]) {
        //             obj[val.channel_name_chinese + val.channel_type] = {
        //                 start: key,
        //                 step: 1
        //             };
        //         } else {
        //             obj[val.channel_name_chinese + val.channel_type].step++;
        //         }
        //     });
        //     this.myObj_two = obj;
        //     console.log(this.myObj_two, "this.myObj");
        // },
        dataMerge: (tableData, mergeCol) => {
            // mergeData：最终输出合并的数据，
            // pos：记录每个列最终占了几行，可以理解成需要合并的每一列占据的行数，除第一列就是有几行合并就是几，其他列都是0
            let [mergeData, pos] = [{}, {}]
            //循环数据
            for (let i in tableData) {
                //循环数据内对象，查看有多少key
                for (let j in tableData[i]) {
                    //如果只有一条数据时默认为1即可，无需合并
                    if (i == 0) {
                        mergeData[j] = [1];
                        pos[j] = 0;
                    } else {
                        let [prev, next] = [tableData[i - 1], tableData[i]];
                        //判断上一级别是否存在 ，如果存在判断两者key是否一致
                        //判断是否有数组规定只允许那几列需要合并单元格的
                        if (next && prev[j] == next[j] && ((!mergeCol || mergeCol.length == 0) || mergeCol.includes(j))) {
                            //如果当前与上一级数据相当，数组就加1 数组后面就添加一个0
                            mergeData[j][pos[j]] += 1;
                            mergeData[j].push(0)
                        } else {
                            mergeData[j].push(1);
                            pos[j] = i;
                        }
                    }
                }
            }
            return mergeData;
        },
        // 合并行高亮------------------------------
        getSameRow(tableData, mergeCol) {
            let sameRowArr = [], sId = 0;
            //循环数据
            for (let i in tableData) {
                tableData[i].index = i;
                if (i == 0) {
                    sameRowArr.push([i])
                } else {
                    if (tableData[i][mergeCol] === tableData[i - 1][mergeCol]) {
                        sameRowArr[sId].push(i)
                    } else {
                        sId = sId + 1;
                        sameRowArr.push([i])
                    }
                }
            }
            return sameRowArr
        },
        rowClass({ rowIndex }) {
            // 同一行
            let temArr = this.curRowArr
            for (let i = 0; i < temArr.length; i++) {
                if (rowIndex == temArr[i]) {
                    return 'row_class'
                }
            }
        },
        cellMouseEnter(row) {
            if (!this.isMerge) return
            this.sameRowArr.forEach((arr) => {
                if (arr.indexOf(row.index) != -1) {
                    this.curRowArr = arr
                }
            })
        },
        cellMouseLeave() {
            this.curRowArr = []
            this.getStripe()
        },
        // 斑马线
        getStripe() {
            if (!this.isMerge) return
            this.$nextTick(() => {
                let tr = document.getElementsByClassName("el-table__row");
                for (let i = 0; i < tr.length; i++) {
                    if (tr[i].classList.contains('el-table__row--striped')) tr[i].classList.remove('el-table__row--striped')
                }
                for (let i = 0; i < this.sameRowArr.length; i++) {
                    if (i % 2 != 0) {
                        for (let j = 0; j < this.sameRowArr[i].length; j++) {
                            tr[this.sameRowArr[i][j]].classList.add('el-table__row--striped')
                        }
                    }
                }
            })
        }
    }
}
</script>
<style lang="less"  scoped>
::v-deep .el-table .row_class td {
    background: #f5f7fa !important;
}

.fy {
    margin: 10px auto 0;
    text-align: center;
}
</style>
